<template>
  <div class="login">
    <!-- <div
      class="bg"
      :style="{
        'background-image': `url(${loginBg})`,
      }"
    ></div> -->
    <div class="login-box">
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <div class="login-title">
          {{ login_title }}
        </div>
        <el-form
          class="login-form login-reg-box"
          :model="loginForm"
          ref="loginFormView"
          :rules="rules"
          label-width="0px"
        >
          <el-form-item label="" prop="account">
            <el-input
              class="account"
              :disabled="loading"
              v-model="loginForm.account"
              placeholder="请输入账号"
              clearable
            >
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconUser />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              class="password"
              type="password"
              :disabled="loading"
              v-model="loginForm.password"
              placeholder="请输入密码"
              clearable
            >
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconPassword />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="lock" label="">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              :loading="loading"
              @click="loginUser(loginFormView)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import IconUser from "../components/icons/IconUser.vue";
import IconPassword from "../components/icons/IconPassword.vue";
import md5 from "js-md5";

import { login_title } from "@/setting";

// import loginBg from "@/assets/img/login-bg.jpg";
import { nextTick, onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user";
import { useRoute, useRouter } from "vue-router";

const loginFormView = ref();
// 加载中
const loading = ref(false);
// 记住我
const lock = ref(false);
const rules = reactive({
  account: [{ required: true, trigger: "blur", message: "账号不能为空" }],
  password: [{ required: true, trigger: "blur", message: "密码不能为空" }],
});

let loginForm = reactive({
  account: "admin",
  password: "123456",
});

const userStore = useUserStore();
const router = useRouter();

const callback = ref("");

onMounted(() => {
  callback.value = decodeURIComponent(useRoute().query.callback ?? "");
  loginForm.account = localStorage.getItem("LOGIN_USER_ACCOUNT") ?? "";
  const temp = localStorage.getItem("LOGIN_USER_LOCK_ME") ?? "false";
  lock.value = temp === "true";
});

function loginUser(Vform) {
  if (!Vform) return;
  Vform.validate((valid) => {
    if (valid) {
      console.log("[ loginForm ] >", loginForm);
      const upData = {
        account: loginForm.account,
        password: md5(loginForm.password),
      };
      loading.value = true;

      userStore
        .login(upData)
        .then(() => {
          if (lock.value) {
            localStorage.setItem("LOGIN_USER_ACCOUNT", loginForm.account);
            localStorage.setItem("LOGIN_USER_LOCK_ME", lock.value);
          }
          loading.value = false;
          nextTick(() => {
            if (callback.value) {
              router.push(callback.value);
            } else {
              router.push("/");
            }
          });
        })
        .catch((err) => {
          ElMessage({
            type: "error",
            message: err,
          });
          loading.value = false;
        });
    } else {
      return false;
    }
  });
}
</script>

<style lang="scss" scoped>
.bg {
  z-index: -1;
  position: fixed;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0.8;
  background-position: center;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  .login-box {
    width: 450px;
    margin-bottom: $nil-padding-2 * 5;
  }
  .login-btn {
    width: 100%;
  }
  .login-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: $nil-padding-2;
  }
}
</style>
